還記得前面我們學到的變數嗎?當時我們反覆了解到變數是幫助我們記住資訊,但如果我們在寫程式時需要儲存一系列具有關聯性的值時,除了用變數一個一個宣告以外,難道沒有更好的方法嗎?
有的,那就是使用陣列。
當我們手邊有一系列具有關聯性的資料時,若一個一個宣告變數將會非常耗時,因此可以透過陣列紀錄多個數字、字串、函式等,甚至當有多個物件時也可以用陣列來記錄。陣列裡的值不需要都是相同的資料型別,同一個陣列可以儲存不同型別的資料。
建立陣列的方法就跟宣告變數一樣,也會賦予它一個名字,使用 var 關鍵字,後面接上陣列名稱。指定給陣列的值會放在方括號中,每一個值中間用逗點隔開。
範例如下:
有三個玉米田,分別種出 8 個、5 個、6 個玉米var cornField = [8,5,6];
有兩隻狗,分別叫做 John 跟 Bobvar dogs = ['John' , 'Bob'];
陣列中每一個資料項目都會被自動給予一個編號,這個編號稱為索引(index),第一個值編號為 0,第二個值編號為 1,以此類推。索引可用來存取陣列中的指定項目。
var cornField = [8,5,6];
console.log(cornField[0]);
// 得出的值就會是 8
如果在選取陣列時,沒有寫到索引值的話,讀出來的結果就不會是值,而是整個陣列的內容。
console.log(cornField);
// 讀取結果:[8,5,6]
當然,也可以用變數儲存陣列中指定項目的值,並呼叫出來。
var cornField = [8,5,6];
var cornField2 = cornField[1];
console.log(cornField2);
// 得出的值就會是 5
var cornField = [];
cornField.push(5);
cornField.push(8);
cornField.push(6);
console.log(cornField);
// 得到的結果就會是 [5,8,6]
cornField[3] = 100;
// 直接新增第四個值為 100
跟操作變數一樣,將新的值指定給該資料項目。
以修改陣列第一個值為例:
cornField[0] = 10;
// 把第一個值由 5 改成 10
在陣列後面使用 length 特性可以得知該陣列的長度,亦即該陣列中共有幾個值。後面學到 for 迴圈時會很常用到。console.log(cornField.length);
filter 方法可以從 A 陣列中過濾出符合條件的資料,並成立新的 B 陣列來放置過濾出的資料。此方法會帶出一個匿名函式,過濾資料的條件會寫在函式的裡面,前面加一個 return,表示此函式將會回傳條件為 true 的資料。
以下範例引用自王志誠老師 a.k.a 卡斯伯的文章:JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]。
var people = [
{
name: 'Casper',
like: '鍋燒意麵',
age: 18
},
{
name: 'Wang',
like: '炒麵',
age: 24
},
{
name: 'Bobo',
like: '蘿蔔泥',
age: 1
},
{
name: '滷蛋',
like: '蘿蔔泥',
age: 3
}
];
var filterEmpty = people.filter(function(item, index, array){
});
console.log(filterEmpty); // 沒有條件,會是一個空陣列
var filterAgeThan5 = people.filter(function(item, index, array){
return item.age > 5; // 取得大於五歲的
});
console.log(filterAgeThan5); // Casper, Wang 這兩個物件
var filterDouble = people.filter(function(item, index, array){
return index % 2 === 1; // 取得陣列中雙數的物件
});
console.log(filterDouble); // Wang, 滷蛋 這兩個物件
函式中的參數 item、index、array 分別代表「原始陣列的值」、「原始陣列值的索引」、「原始陣列的名稱」,後兩者為選擇性的,可不帶入。(參考資料:Array.prototype.filter() - MDN)
本來沒打算放入 filter 的介紹,因為我自己對它也不太熟而且還會爆字數,不過正好是一個逼迫自己學習的好機會就是了。
明天來聊聊物件~